<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>阅读宝明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" href="../default/css/index.css">
    <link rel="stylesheet" href="../default/css/animat.min.css">
    <style>
        html,
        body {
            background-color: #efeff4;
            height: 100%;
        }

        .mui-bar ~ .mui-content .mui-fullscreen {
            top: 44px;
            height: auto;
        }

        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }

        .mui-bar ~ .mui-pull-top-tips {
            top: 24px;
        }
        .mui-content{
            height: 100%;
        }
        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }

        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }

        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }

        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }

        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }

        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }

        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mui-pull-top-canvas canvas {
            width: 40px;
        }

        .mui-slider-indicator.mui-segmented-control {
            background-color: #fff;
        }

        #slider .mui-card {
            margin: 0;
        }

        .mui-table-view-cell:after {
            right: 15px;
            color: #f5f6f7;
        }

        /*.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
            width: 50%;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll{
            width: 100%;
        }*/
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left backahter"></a>
    <h1 class="mui-title">阅读宝明细</h1>
</header>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl"
             class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" data-classificationid="1" href="#item1mobile">邀请奖励</a>
                <!--<a class="mui-control-item" data-classificationid="2" href="#item2mobile">签到奖励</a>-->
                <a class="mui-control-item"  data-classificationid="2" href="#item2mobile">浏览奖励</a>
                <a class="mui-control-item"  data-classificationid="3" href="#item3mobile">任务明细</a>
                <a class="mui-control-item"  data-classificationid="4" href="#item4mobile">收款明细</a>
                <!--<a class="mui-control-item"  data-classificationid="6" id="distribution">商城分销明细</a>-->
            </div>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-orderStatus="邀请奖励">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-orderStatus="签到奖励">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-orderStatus="浏览奖励">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-orderStatus="任务明细">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item4mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-orderStatus="收款明细">
                        <div class="box">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>



<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>

<script src="../default/js/mui.pullToRefresh.js"></script>
<script src="../default/js/mui.pullToRefresh.material.js"></script>
<script>
    mui.init();

    $(function () {
        var paymentStatus='1';
        logic(paymentStatus,0,0);
    })




    var startingNumber;
    var pageSize=50;

    function logic(paymentStatus,self,index) {
        mui.showLoading("正在加载..", "div");
        var websitetena;
        if(paymentStatus==1){
            websitetena='/InvitationToEarnController/findByUserId'
        }/*else if(paymentStatus==2){
            websitetena='/SignInController/queryUserAll'
        }*/else if(paymentStatus==2){
            websitetena='/UserAndNewsController/queryUserAll'
        }else if(paymentStatus==3){
            websitetena='/ForwardController/paymentRecord'
        }else if(paymentStatus==4){
            websitetena='/DetailsOfTransferController/findById1'
        }


        if(self==0){
            startingNumber=0;
        }else{
            var ul = self.element.querySelector('.mui-table-view');
            var length = ul.querySelectorAll('li').length;
            if(length%pageSize == 0){
                startingNumber = length;
            }else{
                startingNumber = length;
            }
        }


        // 先加载必要的数据,在进行下上加载操纵
        //新闻内容
        $.ajax({
            url: website + websitetena,
            type: 'post',
            data: {
                'startingNumber': startingNumber,
                'userId':userId,
            },
            success: function (data) {
                var item = $(".mui-active")[1];
                if (index == 0) {
                    // 页面第一次加载操纵
                    var html = '';
                    if (item.querySelector('.mui-loading')) {
                        html += '<ul class="mui-table-view">';
                        data.data.forEach(function (one) {

                            if(paymentStatus==1){
                                html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                    '                                <div class="mui-card">\n' +
                                    '                                    <div class="mui-card-header">\n' +
                                    '                                        <p>手机号:'+one.account+'</p>\n' +
                                    '                                        <p>阅读宝数量:'+one.earn_quantity+'</p>\n' +
                                    '                                    </div>\n' +
                                    '                                    <div class="mui-card-content">\n' +
                                    '                                        <div class="mui-card-content-inner">\n' +
                                    '                                            <p>时间:'+one.earning_time+'</p>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </div>\n' +
                                    '                            </li>'
                            }/*else if(paymentStatus==2){
                                html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                    '                                <div class="mui-card">\n' +
                                    '                                    <div class="mui-card-header">\n' +
                                    '                                        <p>签到时间:'+one.earning_time+'</p>\n' +
                                    '                                        <p>阅读宝数量:'+one.earn_balance+'</p>\n' +
                                    '                                    </div>\n' +
                                    '                                </div>\n' +
                                    '                            </li>'
                            }*/else if(paymentStatus==2){
                                if(one.earn_balance!=null){
                                    html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                        '                                <div class="mui-card">\n' +
                                        '                                    <div class="mui-card-header">\n'+
                                        '                                        <p>奖励来源:'+one.earning_way+'</p>'+
                                    '                                        <p>阅读宝数量:'+one.earn_balance+'</p>\n'+
                                    '                                    </div>\n' +
                                    '                                    <div class="mui-card-content">\n' +
                                    '                                        <div class="mui-card-content-inner">\n' +
                                    '                                            <p>时间:'+one.earning_time+'</p>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </div>\n' +
                                    '                            </li>'
                                }

                            }else if(paymentStatus==3){
                                html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                    '                                <div class="mui-card">\n' +
                                    '                                    <div class="mui-card-header">\n' +
                                    '                                        <p>奖励来源:'+one.task_name+'</p>\n' +
                                    '                                        <p>阅读宝数量:'+one.amount_of_payment+'</p>\n' +
                                    '                                    </div>\n' +
                                    '                                    <div class="mui-card-content">\n' +
                                    '                                        <div class="mui-card-content-inner">\n' +
                                    '                                            <p>时间:'+one.payment_time+'</p>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </div>\n' +
                                    '                            </li>'
                            }else if(paymentStatus==4){
                                html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                    '                                <div class="mui-card">\n' +
                                    '                                    <div class="mui-card-header">\n' +
                                    '                                        <p>打款手机号:'+one.phoneNumber+'</p>\n' +
                                    '                                        <p>收款数量:'+one.transferVolume+'</p>\n' +
                                    '                                    </div>\n' +
                                    '                                    <div class="mui-card-content">\n' +
                                    '                                        <div class="mui-card-content-inner">\n' +
                                    '                                            <p>收款时间:'+one.transferTime+'</p>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </div>\n' +
                                    '                            </li>'
                            }


                        });
                        html += '</ul>';
                        setTimeout(function () {
                            item.querySelector('.box').innerHTML = html;
                            mui.hideLoading();
                        }, 500);
                    };
                    mui.hideLoading();
                } else {
                    var html = '';
                    data.data.forEach(function (one) {
                        if(paymentStatus==1){
                            html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                '                                <div class="mui-card">\n' +
                                '                                    <div class="mui-card-header">\n' +
                                '                                        <p>手机号:'+one.account+'</p>\n' +
                                '                                        <p>阅读宝数量:'+one.earn_quantity+'</p>\n' +
                                '                                    </div>\n' +
                                '                                    <div class="mui-card-content">\n' +
                                '                                        <div class="mui-card-content-inner">\n' +
                                '                                            <p>时间:'+one.earning_time+'</p>\n' +
                                '                                        </div>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                            </li>'
                        }else if(paymentStatus==2){
                            html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                '                                <div class="mui-card">\n' +
                                '                                    <div class="mui-card-header">\n' +
                                '                                        <p>签到时间:'+one.earning_time+'</p>\n' +
                                '                                        <p>阅读宝数量:'+one.earn_balance+'</p>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                            </li>'
                        }else if(paymentStatus==3){
                            if(one.earn_balance!=null){
                                html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                    '                                <div class="mui-card">\n' +
                                    '                                    <div class="mui-card-header">\n'+
                                    '                                        <p>奖励来源:'+one.earning_way+'</p>'+
                                '                                        <p>阅读宝数量:'+one.earn_balance+'</p>'+
                                '                                    </div>\n' +
                                '                                    <div class="mui-card-content">\n' +
                                '                                        <div class="mui-card-content-inner">' +
                                '                                            <p>时间:'+one.earning_time+'</p>' +
                                '                                        </div>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                            </li>'
                            }
                        }else if(paymentStatus==4){
                            html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                '                                <div class="mui-card">\n' +
                                '                                    <div class="mui-card-header">\n' +
                                '                                        <p>奖励来源:'+one.task_name+'</p>\n' +
                                '                                        <p>阅读宝数量:'+one.amount_of_payment+'</p>\n' +
                                '                                    </div>\n' +
                                '                                    <div class="mui-card-content">\n' +
                                '                                        <div class="mui-card-content-inner">\n' +
                                '                                            <p>时间:'+one.payment_time+'</p>\n' +
                                '                                        </div>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                            </li>'
                        }else if(paymentStatus==5){
                            html += '<li class="mui-table-view-cell" data-order-id="'+one.id+'">\n' +
                                '                                <div class="mui-card">\n' +
                                '                                    <div class="mui-card-header">\n' +
                                '                                        <p>打款手机号:'+one.phoneNumber+'</p>\n' +
                                '                                        <p>收款数量:'+one.transferVolume+'</p>\n' +
                                '                                    </div>\n' +
                                '                                    <div class="mui-card-content">\n' +
                                '                                        <div class="mui-card-content-inner">\n' +
                                '                                            <p>收款时间:'+one.transferTime+'</p>\n' +
                                '                                        </div>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                            </li>'
                        }
                    });

                    if (data.data.length == 0) {
                        self.endPullUpToRefresh(true);
                    } else if (data.data.length < pageSize) {
                        $(".mui-active:eq(1)").find(".mui-table-view").append(html);
                        self.endPullUpToRefresh(true);
                    } else {
                        $(".mui-active:eq(1)").find(".mui-table-view").append(html);
                        self.endPullUpToRefresh(false);
                    }
                    mui.hideLoading();

                }

            }
        });

    }




    mui('header').on('tap', '.backahter', function (e) {
        mui.openWindow({
            url: 'task.html'
        });
    });




    (function ($) {

        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });

        $.ready(function () {

            document.getElementById('slider').addEventListener('slide', function (e) {
                // 这里可以获得标题
                e.preventDefault();
                var paymentStatus = $(".mui-active")[0].getAttribute("data-classificationid");
                logic(paymentStatus, 0, 0);
                pageNumber = 0;
            });
            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    up: {
                        callback: function () {
                            var self = this;
                            var paymentStatus = $(".mui-active")[0].getAttribute("data-classificationid");
                            logic(paymentStatus, self, 2);
                        }
                    }
                });
            });

        });

    })(mui);

</script>
</body>

</html>